import positionLogo from './position.png';
import parkingLogoS from './parking-s.png';
import parkingLogoP from './parking-p.png';
import futiLogo from './futi.png';
import zhitiLogo from './zhiti.png';
import rukouLogo from './rukou.png';
import chukouLogo from './chukou.png';
import quanjingLogo from './quanjing.png';

import minemap from 'minemap';

import {routeArray} from '../../const/index';

const popup = new minemap.Popup({offset: [0, -15]});
const path = routeArray;

let imageParkSOnload = false;
let imageParkPOnload = false;

export default {
    popup: popup,
    initMap: function (context) {
        minemap.domainUrl = '//minedata.cn';
        minemap.spriteUrl = '//minedata.cn/minemapapi/v1.3/sprite/sprite';
        minemap.serviceUrl = '//minedata.cn/service';
        minemap.accessToken = '662c08fbb5b64c6a93405fb6f1a061ed';
        minemap.solution = 4318;
        const map = new minemap.Map({
            container: 'map',
            style: "//minedata.cn/service/solu/style/id/4318",
            center: [106.645414, 26.6135198],
            zoom: 14,
            pitch: 0,
            maxZoom: 22,    //地图最大缩放级别限制
            minZoom: 9,     //地图最小缩放级别限制
            logoControl: false,
            localIdeographFontFamily: "宋体,微软雅黑"
        });

        map.on('load', () => {
            map.addSource('my-position', {
                "type": "geojson",
                "data": {
                    "type": "FeatureCollection",
                    "features": [{
                        "type": "Feature",
                        "geometry": {
                            "type": "Point",
                            "coordinates": [106.645414, 26.6135198]
                        }
                    }]
                }
            });
            map.addSource('parking-lot-data', {
                "type": "geojson",
                "data": './data/parking_lot_data.json'
            });

            const futiPos = new Image();
            futiPos.src = futiLogo;
            futiPos.onload = () => {
                map.addImage('futi', futiPos);
            }

            const zhitiPos = new Image();
            zhitiPos.src = zhitiLogo;
            zhitiPos.onload = () => {
                map.addImage('zhiti', zhitiPos);
            }

            const rukouPos = new Image();
            rukouPos.src = rukouLogo;
            rukouPos.onload = () => {
                map.addImage('rukou', rukouPos);
            }

            const chukouPos = new Image();
            chukouPos.src = chukouLogo;
            chukouPos.onload = () => {
                map.addImage('chukou', chukouPos);
            }

            const quanjingPos = new Image();
            quanjingPos.src = quanjingLogo;
            quanjingPos.onload = () => {
                map.addImage('quanjing', quanjingPos);
            }

            const imagePos = new Image();
            imagePos.src = positionLogo;
            imagePos.onload = () => {
                map.addImage('my-position', imagePos);
                map.addLayer({
                    "id": "position",
                    "type": "symbol",
                    "source": "my-position",
                    "layout": {
                        "icon-image": "my-position",
                        "icon-size": 0.5,
                        "icon-rotation-alignment": "map"
                    },
                    "paint": {
                        "render3d": true,
                        "symbol-height": 1.0
                    }
                });
            }

            const imageParkS = new Image();
            imageParkS.src = parkingLogoS;
            const imageParkP = new Image();
            imageParkP.src = parkingLogoP;
            imageParkS.onload = () => {
                imageParkSOnload = true;
                addParkIcon(map, imageParkS, imageParkP);
            };
            imageParkP.onload = () => {
                imageParkPOnload = true;
                addParkIcon(map, imageParkS, imageParkP);
            };

            map.addLayer({
                "id": "path",
                "type": "line",
                "source": {
                    "type": "geojson",
                    "data": {
                        "type": "FeatureCollection",
                        "features": [
                            {
                                "type": "Feature",
                                "geometry": {
                                    "type": "LineString",
                                    "coordinates": path
                                }
                            }
                        ]
                    }
                },
                "layout": {
                    "visibility": 'none'
                },
                "paint": {
                    "line-color": "#8ef1c3",
                    "line-width": 5
                }
            });

            map.addSource("search-point", {
                "type": "geojson",
                "data": {
                    "type": "FeatureCollection",
                    "features": [{
                        "type": "Feature",
                        "geometry": {
                            "type": "Point",
                            "coordinates": [106.6610578, 26.6079437]
                        },
                        "properties": {
                            "title": "贵交院北院",
                            "icon": "marker-15-6",
                            "color": "#108ee9",
                            "search-id": 1
                        }
                    }]
                }
            });

            map.addLayer({
                "id": "search-point",
                "type": "symbol",
                "source": "search-point",
                "layout": {
                    "icon-image": "{icon}",
                    "text-field": "{title}",
                    "text-offset": [0, 0.9],
                    "text-anchor": "top",
                    "icon-allow-overlap": true,  //图标允许压盖
                    "text-allow-overlap": true,   //图标覆盖文字允许压盖,
                    "icon-size": 2,
                    "text-size": 12
                },
                "paint": {
                    "text-color": "#333",
                    "icon-color": {
                        'type': 'identity',
                        'property': 'color'
                    }
                },
                "filter": ["==", "search-id", 0]
            });

            map.on('click', (e) => {
                var features = map.queryRenderedFeatures(e.point, {'layers': ['parking']});
                if (features && features.length > 0) {
                    console.log(features[0]);
                    map.flyTo({
                        center: features[0].geometry.coordinates
                    });
                    setTimeout(() => {
                        popup.setHTML('<div>名称： ' + features[0].properties.name + '</div><div>单价：' + features[0].properties.price + '元/小时</div><div>距离：' + features[0].properties.distance + '公里</div>').setLngLat(features[0].geometry.coordinates).addTo(map);
                    }, 50);
                    context.props.clickMapIcon({
                        name: features[0].properties.name,
                        price: features[0].properties.price,
                        distance: 0
                    });
                }
                else {
                    context.props.clickMapIcon(false);
                }
            });
        });
        map.addControl(new minemap.Navigation(), 'bottom-right');

        return map;
    }
}

function addParkIcon(map, imageParkS, imageParkP) {
    if (imageParkSOnload && imageParkPOnload) {
        map.addImage('my-parking-s', imageParkS);
        map.addImage('my-parking-p', imageParkP);
        map.addLayer({
            "id": "parking",
            "type": "symbol",
            "source": "parking-lot-data",
            "layout": {
                "icon-image": {
                    "property": "park-lot-type",
                    "stops": [
                        [0, 'my-parking-p'],
                        [1, 'my-parking-s'],
                    ]
                },
                "icon-size": {
                    "property": "park-lot-type",
                    "stops": [
                        [0, 0.4],
                        [1, 0.5],
                    ]
                }
            },
            "filter": ['==', 'search-id', 0]
        });
    }
}